<template>
  <div class="search-bar">
    <label>
      <input v-model="query" class="search" placeholder="搜索..." type="text" />
      <ElButton circle icon="el-icon-plus" size="mini" title="添加联系人" @click="showNewThread = true" />
    </label>
    <UserPicker
      v-if="showNewThread"
      :visible.sync="showNewThread"
      :disabled-ids="[userId]"
      multiple
      @confirm="onConfirm" />
  </div>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    name: 'ChatSearchBar',
    data() {
      return {
        showNewThread: false,
        query: ''
      }
    },
    computed: {
      ...mapState('user', { userId: state => state.sysUser.userId })
    },
    watch: {
      query() {
        this.$emit('input', this.query)
      }
    },
    methods: {
      onConfirm(users) {
        this.$emit('confirm', users)
      }
    }
  }
</script>

<style lang="scss">
  .search-bar {
    height: 50px;
    padding: 12px;
    border-bottom: solid 1px #e0e0e0;

    .avatar,
    .name {
      vertical-align: middle;
    }

    .avatar {
      border-radius: 2px;
    }

    .name {
      display: inline-block;
      margin: 0 0 0 15px;
      font-size: 16px;
    }

    .search {
      width: 222px;
      height: 30px;
      padding: 0 10px;
      color: #a1a1a1;
      font-size: 12px;
      line-height: 30px;
      background-color: #eeeae8;
      border: none;
      border-radius: 4px;
      outline: none;
    }

    input + .el-button {
      margin-left: $margin-size;
    }

    .el-button {
      color: #a1a1a1;
      background: #eeeae8;
      border: none;
      border-radius: 4px;

      &:hover {
        background: #dfdbd9;
        border: none;

        i {
          color: #f4f4e9;
        }
      }
    }
  }
</style>
